<script setup>
import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import { ref, reactive ,onMounted} from "vue";
import "swiper/swiper-bundle.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
const slides = ref([
  { img: "/src/assets/value1.png" },
  { img: "/src/assets/value2.png" },
  { img: "/src/assets/value3.png" },
  { img: "/src/assets/value4.png" },
  { img: "/src/assets/value5.png" },
]);
const texts = reactive([
  {
    title: "真正进取",
    subtitle:
      "坚守底线，做正确的事情<br />对自己及团队有“要求”<br />有担当，敢于接受挑战",
  },
  {
    title: "务实求真",
    subtitle:
      "接地气，在快速迭代中找到最优解<br />不自嗨，关注事实，注重结果<br />直面问题，追寻根因及本质",
  },
  {
    title: "坦诚开放",
    subtitle:
      "听真话，说实话，不绕弯<br />主动反映问题，勇于承认错误<br />乐于相互揭示盲点和问题",
  },
  {
    title: "协同创新",
    subtitle:
      "相信团队，打破部门壁垒，保持主动高效沟通<br />敢于试错，在失败中成长<br />不设边界，不安于现状，寻求突破",
  },
  {
    title: "始终创业",
    subtitle:
      "每件事都是自己的事<br />保持好奇心，追求客户价值提升<br />拥抱变化，对不确定性保持乐观心态",
  },
]);

const activeIndex = ref(0);
const mySwiper = ref(null);
// 初始化 Swiper

const onSlideChangeTransitionStart = () => {
  // 通过 ref 使用 mySwiper
  if (mySwiper.value) {
    mySwiper.value.swiper; // 可以调用 Swiper 实例的方法或属性
  }
};

const onSlideChangeTransitionEnd = () => {
  // 通过 ref 使用 mySwiper
  if (mySwiper.value) {
    mySwiper.value.swiper; // 可以调用 Swiper 实例的方法或属性
  }
};

const onSwiper = (swiperInstance) => {
  mySwiper.value = swiperInstance;
};

const onSlideChange = (swiperInstance) => {
  activeIndex.value = swiperInstance.activeIndex;
};

const goToSlide = (index) => {
  mySwiper.value.slideTo(index);
  activeIndex.value = index;
};

const goToNextSlide = () => {
  if (activeIndex.value < slides.value.length - 1) {
    goToSlide(activeIndex.value + 1);
  } else {
    goToSlide(0);
  }
};

const goToPrevSlide = () => {
  if (activeIndex.value > 0) {
    goToSlide(activeIndex.value - 1);
  } else {
    goToSlide(slides.value.length - 1);
  }
};

document.addEventListener("DOMContentLoaded", function () {
  var middleTexts = document.querySelectorAll(".middle-text");
  middleTexts.forEach(function (middleText) {
    middleText.addEventListener("click", function () {
      // 隐藏所有的 .text-subtitle
      document.querySelectorAll(".text-subtitle").forEach(function (subtitle) {
        subtitle.classList.remove("active");
      });
      document.querySelectorAll(".text-title").forEach(function (subtitle) {
        subtitle.classList.remove("active");
      });

      // 显示当前点击的 .text-subtitle
      var subtitle = this.querySelector(".text-subtitle");
      subtitle.classList.add("active");
      var title = this.querySelector(".text-title");
      title.classList.add("active");

      // 移除所有 .middle-text 的 active 类
      middleTexts.forEach(function (element) {
        element.classList.remove("active");
      });

      // 为当前点击的 .middle-text 添加 active 类
      this.classList.add("active");
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const blocks = document.querySelectorAll(".block-content");
  let lastExpandedBlock = blocks[0]; // 默认第一个展开

  // 默认展开第一个
  lastExpandedBlock.classList.add("expanded");

  blocks.forEach((block) => {
    block.addEventListener("mouseenter", () => {
      // 移除上一个展开的
      if (lastExpandedBlock) {
        lastExpandedBlock.classList.remove("expanded");
      }
      // 当前的添加展开
      block.classList.add("expanded");
      lastExpandedBlock = block;
    });

    block.addEventListener("mouseleave", () => {
      // 延迟检查是否移出所有块
      setTimeout(() => {
        if (!Array.from(blocks).some((b) => b.matches(":hover"))) {
          // 没有块处于悬停状态，恢复最后一个块
          lastExpandedBlock.classList.add("expanded");
        }
      }, 100);
    });
  });
});
</script>

<template>
  <div class="home">
    <div class="banner">
      <div class="desc-bg">
        <div class="desc">
          <span class="line1">我们的愿景</span>
          <div class="line2">全球领先的<br />社交开发者孵化运营平台</div>
          <div class="line3">
            Our Vision: The world's leading social developer incubation and
            <br />operation platform
          </div>
        </div>
      </div>
    </div>

    <div class="content-bg">
      <div class="content">
        <div class="title">致力于构建移动应用生态</div>
        <div class="sub-title">
          通过领先的开发者孵化运营能力和产业增长能力帮助开发者实现成功
        </div>
        <div class="cards">
          <div class="card">
            <div class="num">50+</div>
            <div class="text">累积开发者</div>
          </div>
          <div class="card">
            <div class="num">3.5<span class="num-tail">亿+</span></div>
            <div class="text">累积下载量</div>
          </div>
          <div class="card">
            <div class="num">200+</div>
            <div class="text">累积产品数</div>
          </div>
        </div>
      </div>

      <div class="content content2">
        <div class="title">企业价值观</div>
        <div class="sub-title">
          君喻价值观来源于君喻创始人创业及企业经营和管理的实践
        </div>
        <div class="wrap">
          <div class="left">
            <swiper
              :ref="mySwiper"
              :modules="[Navigation, Pagination, Scrollbar, A11y]"
              slides-per-view="1"
              direction="vertical"
              :space-between="20"
              loop
              :allow-touch-move="false"
              @swiper="onSwiper"
              @slideChange="onSlideChange"
              class="mySwiper"
            >
              <swiper-slide
                v-for="(slide, index) in slides"
                :key="index"
              >
                <div class="left-slide">
                  <div>
                    <img
                    :src="slide.img"
                    alt="Slide Image"
                    style="width: '100%'"
                  />
                   <!-- 透明蒙层 -->
                  <div class="overlay" :class="{'animateoverlay':activeIndex === index }"></div>
                  </div>
                </div>
              </swiper-slide>
              <div class="swiper-pagination"></div>
            </swiper>
          </div>
          <div class="middle">
            <div
              class="middle-text"
              v-for="(text, index) in texts"
              :key="index"
              @click="() => goToSlide(index)"
            >
              <p class="text-title" :class="{ active: activeIndex === index }">
                {{ text.title }}
              </p>
              <p
                class="text-subtitle"
                :class="{ active: activeIndex === index }"
              >
                <span v-html="text.subtitle"></span>
              </p>
            </div>
          </div>
          <div class="values-swiper-scrollbar-content">
            <div class="prev" @click="goToPrevSlide">
              <img src="./assets/up.png" class="prev-img" />
            </div>
            <div class="values-swiper-scrollbar">
              <span
                v-for="(slide, index) in slides"
                :key="index"
                class="swiper-pagination-bullet"
                :class="{
                  'swiper-pagination-bullet-active': activeIndex === index,
                }"
              ></span>
            </div>
            <div class="next" @click="goToNextSlide">
              <img src="./assets/up.png" class="next-img" />
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="title">成熟的商业解决方案</div>
        <div class="sub-title">
          “数字化建设”+“产品化运营”能力，驱动实现持续的创收增长
        </div>
        <div class="wrap info-content">
          <div class="block-content" id="block1">
            <div class="block-title">
              <span class="title-text">数据驱动的科学立项</span>
              <span class="title-num">01</span>
            </div>
            <div class="block-bottom">
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon1-1.png" class="icon-img" />
                  <p class="stitle">市场行情监控</p>
                </div>
                <div class="des noWrap">
                  自主研发行情数据监控系统赋能立项，汇集海量玩法，捕获优质创意
                </div>
              </div>
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon1-2.png" class="icon-img" />
                  <p class="stitle">极速MVP立项验证</p>
                </div>
                <div class="des noWrap">
                  高效完成产品组合定位及吸量测试，节约试错成本
                </div>
              </div>
            </div>
            <img src="./assets/block1.png" class="block-img" />
          </div>
          <div class="block-content" id="block2">
            <div class="block-title">
              <span class="title-text">高效的研发和运营</span>
              <span class="title-num">02</span>
            </div>
            <div class="block-bottom">
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon1-1.png" class="icon-img" />
                  <p class="stitle">产品数据分析</p>
                </div>
                <div class="des noWrap">
                  自有标准化产品数据及用户行为分析工具，赋能业务调优增长
                </div>
              </div>
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon2-2.png" class="icon-img" />
                  <p class="stitle">1对1的运营服务</p>
                </div>
                <div class="des noWrap">每款产品均配备1对1专人优化指导</div>
              </div>
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon2-3.png" class="icon-img" />
                  <p class="stitle">开发者辅助套件</p>
                </div>
                <div class="des noWrap">
                  基于历史最佳实践的开发者辅助套件，助力产品高效迭代和交付
                </div>
              </div>
            </div>
            <img src="./assets/block2.png" class="block-img" />
          </div>
          <div class="block-content" id="block3">
            <div class="block-title">
              <span class="title-text">一站式的推广与商业化</span>
              <span class="title-num">03</span>
            </div>
            <div class="block-bottom">
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon3-1.png" class="icon-img" />
                  <p class="stitle">一站式增长服务</p>
                </div>
                <div class="des noWrap">
                  助力产品找到匹配用户及商业化特征的最佳成功路
                </div>
              </div>
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon3-2.png" class="icon-img" />
                  <p class="stitle">有效用户的成本与规模优势</p>
                </div>
                <div class="des noWrap">
                  精准投放及质量预估系统，抓住爆量机会
                </div>
              </div>
              <div class="block-list">
                <div class="title-content">
                  <img src="./assets/icon3-3.png" class="icon-img" />
                  <p class="stitle">商业化增长分析</p>
                </div>
                <div class="des noWrap">
                  自有商业化分析系统，助力开发者实现商业化高效增长
                </div>
              </div>
            </div>
            <img src="./assets/block3.png" class="block-img" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style setup name="Home">
.home {
  overflow: hidden;
}
.banner {
  overflow: hidden;
}
.desc-bg {
  background-image: url("./assets/banner.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.desc {
  width: 1200px;
  color: #fff;
  margin: 0 auto;
  padding: 5% 0;
}
.line1 {
  display: inline-block;
  color: #fff;
  font-family: Pangmen;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 117%; /* 58.5px */
  letter-spacing: -2.75px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid #fff;
}
.line2 {
  color: #fff;
  font-family: Pangmen;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 117%; /* 81.9px */
  letter-spacing: -3.85px;
}
.line3 {
  color: #fff;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  margin-top: 20px;
  line-height: 34px; /* 170% */
}
.content-bg {
  background-image: url("./assets/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
}
.content {
  width: 1200px;
  margin: auto;
}
.title {
  color: #0e0729;
  text-align: center;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 117%; /* 58.5px */
  letter-spacing: -2.75px;
  margin-bottom: 25px;
}
.sub-title {
  color: #999;
  text-align: center;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 117%; /* 35.1px */
  margin-bottom: 50px;
}
.cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0px 0 20px;
}
.card {
  width: 350px;
  height: 384px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 10px;
  flex-shrink: 0;
  border-radius: 26px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 39px 40px 0px rgba(14, 7, 41, 0.07);
}
.card:hover {
  border-radius: 26px;
  border: 2px solid rgba(86, 46, 231, 0.5);
  box-shadow: none;
}
.num {
  color: #562ee7;
  font-family: Anton;
  font-size: 130px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.num-tail {
  color: #562ee7;
  font-family: "Alibaba_PuHuiTi_Black";
  font-size: 49.465px;
  font-style: normal;
  font-weight: 1000;
  line-height: normal;
}
.text {
  color: #0e0729;
  text-align: center;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px; /* 113.333% */
}

.content2 {
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
}
.wrap {
  display: flex;
  align-items: center;
}
.left {
  width: 469px;
  height: 469px;
  margin-left: 0;
  overflow: hidden;
}
.mySwiper {
  width: 100%;
  height: 100%;
}
.left-title {
  position: absolute;
  top: 0;
  right: 50%;
}
.animateoverlay{
  background-color: rgba(255, 255, 255, 0.3); 
  animation: slideDown 2s forwards;
  -webkit-animation: slideDown 2s  forwards;
}

.overlay {
  width: 100%;
  position: absolute;
  top: -0%;
  height: 100%;
}
@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translateY(-100%); 
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.comma {
  font-size: 2em;
}
.middle {
  width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0px 0 70px;
}
.swiper-slide {
  display: flex;
}
.left-slide {
  display: flex;
  align-items: center;
  margin-right: 53px;
}
.left-slide img {
  width: 100%;
  border-radius: 20px;
}
.text-title {
  padding: 10px 0;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #666;
  cursor: pointer;
}
.text-title:hover {
  cursor: pointer;
  font-family: PingFangSC-Sembold, PingFang SC;
  font-size: 28px;
  color: #222;
}
.text-title.active {
  cursor: pointer;
  font-family: PingFangSC-Sembold, PingFang SC;
  font-size: 28px;
  color: #222;
}
.text-subtitle {
  padding-top: 5px;
  /* width: 250px; */
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222;
  line-height: 32px;
  margin-bottom: 20px;
  overflow: hidden;
  display: none;
}
.text-subtitle.active {
  display: block;
}
.values-swiper-scrollbar-content {
  width: 4px;
  height: 300px;
  position: absolute;
  right: 164px;
  border-radius: 50px;
}
.values-swiper-scrollbar {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}
.swiper-pagination-bullet {
  width: 100%;
  height: 20%;
  border-radius: 0;
  display: block;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
.prev {
  cursor: pointer;
  width: 20px;
  height: 20px;
  top: -25px;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -10px;
}
.next {
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -25px;
  transform: rotate(180deg);
}
.prev:hover,
.next:hover {
  background: #e2daff;
  border-radius: 50%;
}
.next-img,
.prev-img {
  width: 14px;
  margin-left: 3px;
}
/**第三个模块 */
.info-content {
  width: 100%;
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-content {
  width: 322px;
  height: 538px;
  border-radius: 20px;
  border: 1px solid #e1e1e1;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
  background-color: #fff;
}

.block-content:hover {
  width: 508px;
  box-shadow: 0 10px 60px 0 #eff4fa;
}

.expanded {
  width: 508px;
  box-shadow: 0 10px 60px 0 #eff4fa;
}
.block-title {
  font-size: 24px;
  color: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 45px 33px 38px 40px;
  position: relative;
}
.title-text {
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.title-num {
  display: none;
}

.expanded .block-title {
  background: #3292ff;
  border-radius: 20px 20px 0 0;
  color: #fff;
}
.expanded .title-num {
  display: block;
}
.block-title:after {
  content: "";
  width: 20px;
  height: 2px;
  background: #222;
  position: absolute;
  bottom: 0;
  left: 38px;
}
.expanded .block-title:after {
  display: none;
}
.block-bottom {
  padding: 40px;
}
.title-content {
  display: flex;
  font-size: 20px;
  padding-bottom: 12px;
  align-items: center;
}
.title-content img {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.stitle {
  color: #0e0729;
  font-family: "Alibaba_PuHuiTi_SemiBold";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.des {
  font-size: 18px;
  color: #666;
  line-height: 32px;
  padding-bottom: 24px;
  display: none;
}
.block-img {
  width: 190px;
  height: 160px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.expanded .des {
  display: block;
  font-family: PingFangSC-Regular, PingFang SC;
}
.expanded .block-img {
  display: none;
}
/* .text-title:hover + .text-subtitle {
            display: block;
        } */
@media (max-width: 600px) {
  .desc {
    width: 350px;
  }
  .line1 {
    color: #fff;
    font-size: 19.262px;
    font-style: normal;
    line-height: 117%; /* 22.537px */
    letter-spacing: -1.059px;
    padding-bottom: 10px;
  }
  .line2 {
    color: #fff;
    font-size: 26.967px;
    font-style: normal;
    line-height: 117%; /* 31.552px */
    letter-spacing: -1.483px;
  }
  .line3 {
    margin-top: 6px;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    line-height: 13.098px; /* 163.73% */
  }
  .content-bg {
    padding: 0;
  }
  .content {
    width: 350px;
    padding: 40px 0;
  }
  .card {
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding: 15px 0 21px 0;
  }
  .num {
    color: #562ee7;
    font-family: Anton;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .num-tail {
    color: #562ee7;
    font-family: "Alibaba PuHuiTi 2.0";
    font-size: 20px;
    font-style: normal;
    font-weight: 1000;
    line-height: normal;
  }
  .text {
    color: #0e0729;
    text-align: center;
    font-family: "Alibaba PuHuiTi 2.0";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px; /* 170% */
  }
  .content-bg {
    background-image: url("./assets/bg3.png");
    padding: 0;
  }
  .content {
  }
  .title {
    color: #0e0729;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    line-height: 117%; /* 21.06px */
    letter-spacing: -0.99px;
    margin-bottom: 10px;
  }
  .sub-title {
    color: #999;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    line-height: 21px; /* 150% */
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .desc {
    width: 700px;
  }
  .line1 {
    font-size: 30px;
  }
  .line2 {
    font-size: 24px;
    letter-spacing: 0.15px;
  }
  .line3 {
    font-size: 16px;
    line-height: normal;
  }
  .content-bg {
    padding: 0;
  }
  .content {
    width: 710px;
    padding: 40px 0;
  }
  .card {
    /* width: 100%; */
    margin: 10px 0;
  }
  .title {
    font-size: 30px;
  }
  .sub-title {
    font-size: 18px;
    margin: 0 30px;
    line-height: 25px;
  }
}

@media (max-width: 1199px) and (min-width: 901px) {
  .desc {
    width: 850px;
  }
  .line1 {
    font-size: 30px;
  }
  .line2 {
    font-size: 24px;
    letter-spacing: 0.15px;
  }
  .line3 {
    font-size: 16px;
    line-height: normal;
  }
  .content-bg {
    padding: 0;
  }
  .content {
    width: 800px;
    padding: 40px 0;
  }
  .card {
    /* width: 100%; */
    margin: 10px 0;
  }
  .title {
    font-size: 30px;
  }
  .sub-title {
    font-size: 18px;
    margin: 0 30px;
    line-height: 25px;
  }
}
</style>
